<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: yellowgreen;
            width: 200px;
            height: 100px;
        }
        #d1 {
            border: 2px dotted red ;
        }
        #d2 {
            padding: 5px 20px 10px;
        }
        .m {
            border: 2px solid red;
            margin: 50px;
        }
        .auto {
            border: 2px solid red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h2>边框</h2>
    <div id="d1"></div>
    <h2>内边距</h2>
    <div id="d2">十大科技大厦空军基地上课大家思考角度思考</div>
    <h2>外边距</h2>
    <div class="m"></div>
    <div class="m"></div>
    <div class="auto"></div>
</body>
</html>

###
边框    border
    1.{
        粗细 border-width:a px
        样式 border-style: solid实线边框(默) dashed 虚线边框 dotted 点边框
        border-color:c
    }
    2. border： a b c（没有顺序）
###
内边距  padding
    设置内容与边框的距离
    默认是顶着边框来放的
    padding-top
    padding-right
    padding-bottom
    padding-left
    支持缩写：padding：*******
###
外边距  margin
    设置盒子与盒子间的距离
    margin-top
    margin-right
    margin-bottom
    margin-left
块级元素水平居中
    前提:
    指定宽度(如果不指定宽度, 默认和父元素一致)
    把水平 margin 设为 auto\0 auto
去除浏览器默认样式
* {
    marign: 0;
    padding: 0;
}
